<template>
<div class="randoms">
  <el-card>

    <div class='container'>
      <div class="right">
         <p class="weoats">关键字</p>
      <el-input  size="small" placeholder="根据编号搜索" v-model="keyWord" class="inputs"/>
    </div>
     <div class="left">

  <el-button size="small" @click="removeSearch">清除</el-button>
      <el-button  type="primary" size="small" @click="searchId">搜索</el-button>
  </div>
</div>
 <el-alert
    :title="title"
    type="info"
     show-icon
     :closable="false">
  </el-alert>
 <el-table
 :data="dataList"
    style="width: 100%">
    <el-table-column
      label="序号"
      prop="id"
      width="190">
    </el-table-column>
    <el-table-column
      label="题型"
      prop="questionType"
      width="180">
      <template #default="{ row }">
        {{ questionsFun(row.questionType) }}
      </template>
    </el-table-column>
     <el-table-column
      label="题目编号"
      prop="questionIDs"
      width="220">
       <template #default="{ row }">
       <a style="color: rgb(0,153,255)"
       v-for="(item,index) in row.questionIDs"
       :key='index'
       @click="clickOpens(item)"
       >{{item.number}}<br></a>
      </template>

    </el-table-column>
     <el-table-column
      label="录入时间"
      prop="addTime"
      width="180">
    </el-table-column>
     <el-table-column
      label="答题时间（s）"
      prop="totalSeconds"
      width="180">
    </el-table-column>
      <el-table-column
      label="正确率（%）"
      prop="accuracyRate"
      width="120">
    </el-table-column>
     <el-table-column
      label="录入人"
      prop="userName"
      width="130">
    </el-table-column>
    <el-table-column label="操作">
      <template #default={row} >
        <!-- 删除数据 -->
        <div class="el-button el-button--danger el-button--small is-plain is-circle">
<i class="el-icon-delete "  @click="delList(row)"></i>
</div>
      </template>
    </el-table-column>
  </el-table>
   <div >
    <el-pagination
      :page-sizes="[ 20, 30, 50,100]"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-size="params.pagesize"
      layout="->,prev, pager, next,sizes,jumper"
      :total="total">
    </el-pagination>
  </div>
</el-card>
<questions-preview @close="handleClose" :preview="preview" :dialogVisible="dialogVisible"  />
</div>

</template>

<script>

import { randoms as getList, removeRandoms as removeList, detail as detailList } from '@/api/hmmm/questions'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'

export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      dataList: [],
      params: {
        pagesize: 10,
        page: 1

      },
      preview: [],
      total: 0,
      keyWord: '',
      dialogVisible: false,
      title: ''

    }
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    // 获取数据
    async getDataList () {
      const res = await getList(this.params)
      this.dataList = res.data.items
      this.title = `数据一共${res.data.counts}条`
      this.total = res.data.counts
    },
    // 题目类型
    questionsFun (type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[type]
    },

    handleCurrentChange (pages) {
      this.params.page = pages
      this.getDataList()
    },
    // 删除数据
    delList (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        removeList(row)
        this.getDataList()
        this.$message.success('删除成功')
      }).catch(() => {

      })
    },
    // 点击搜索
    async searchId () {
      const res = await getList({ ...this.params, keyword: this.keyWord })

      this.dataList = res.data.items
      this.keyWord = ''
    },
    // 点击取消
    removeSearch () {
      this.keyword = ''
      this.getDataList()
    },
    // 题目编号
    clickOpen () {
      this.dialogVisible = true
    },
    // 关闭弹框
    handleClose () {
      this.dialogVisible = false
    },
    // 点击打开题目编号
    async  clickOpens (data) {
      this.dialogVisible = true
      const res = await detailList(data)
      console.log(res)
      this.preview = res.data
    },
    // 分页数据
    handleSizeChange (pagesize) {
      this.pagesize = pagesize
      this.getDataList()
    }
  }
}

</script>

<style scoped lang='scss'>
.container{
  display: flex;
  justify-content: space-between;
   align-items: center;
   margin: 0,20px;
   margin-left: 20px;

}

.right {
 display: flex;
  p{
    width: 60px;
    position: relative;
    bottom: 10px;
    right: 3px;
    font-weight:700;

    color: rgb(96, 98, 102);

  }
 .el-input{
    position: relative;

    left: 23px;
 }

.el-icon-delete{
  color: red;
}
}
</style>
